<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form>
		  <u-form-item label="合并后实箱" prop="mergedFull" labelWidth="180rpx">
		    <u--input
		      placeholder="请扫码"
		      v-model.number="query.mergedFull"
		      suffixIcon="scan"
		      suffixIconStyle="font-size: 68rpx"
		      style="flex: 1;"
		    >
		    </u--input>
		  </u-form-item>
			<u-form-item label="合并后空箱" prop="mergedEmpty" labelWidth="180rpx">
		    <u--input
		      placeholder="请扫码"
		      v-model.number="query.mergedEmpty"
		      suffixIcon="scan"
		      suffixIconStyle="font-size: 68rpx"
		      style="flex: 1;"
		    >
		    </u--input>
		  </u-form-item>
		</u--form>
		<uni-card v-if="Object.keys(boxInfo).length > 0" title="合并后实箱资料">
		  <view class="info-grid">
		    <view class="info-item">
		      <view class="info-label">料号</view>
		      <view class="info-value">{{ boxInfo.materialCode || '-' }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">批号</view>
		      <view class="info-value">{{ boxInfo.materialBatch || '-' }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">数量</view>
					<view class="info-value">{{ boxInfo.qty || '-' }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">第一根生产时间/最后一根生产时间</view>
		      <view class="info-value">{{ boxInfo.productionDate || '-' }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">品种</view>
					<view class="info-value">{{ boxInfo.a || '-' }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">是否超标物料</view>
		      <view class="info-value">{{ boxInfo.b || '-' }}</view>
		    </view>
		    <view class="info-item">
		      <view class="info-label">供应区域</view>
					<view class="info-value">{{ boxInfo.c || '-' }}</view>
		    </view>
				<view class="info-item">
		      <view class="info-label">刃高</view>
					<view class="info-value">{{ boxInfo.d || '-' }}</view>
		    </view>
				<view class="info-item">
		      <view class="info-label">保质期</view>
					<view class="info-value">{{ boxInfo.e || '-' }}</view>
		    </view>
				<view class="info-item">
		      <view class="info-label">班次</view>
					<view class="info-value">{{ boxInfo.f || '-' }}</view>
		    </view>
		  </view>
		</uni-card>
		<u-toast ref="uToast"></u-toast>
		<view class="commonButton">
			<u-button type="primary">确认合箱</u-button>
		</view>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		onLoad() {
		   uni.$on('scancodedate',(data) => this.getCode(data.code))
		},  
		onUnload() {    
		   uni.$off('scancodedate')
		},
		data() {
			return {
				query: {
					mergedFull: '',
					mergedEmpty: ''
				},
				boxInfo: {
				}
			};
		},
		methods: {
			getCode(code) {
				const regex = /^R-\d+$/
				if (regex.test(code)) {
					if (!this.query.mergedFull) {
						this.query.mergedFull = code
					} else {
						this.query.mergedEmpty = code
					}
				}
			},
		}
	}
</script>

<style lang="scss">
.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 10rpx;
}

.info-item {
  width: 100%;
  padding: 15rpx;
  background-color: #f5f7fa;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  line-height: 40rpx;
}

/* 可编辑输入框样式：与原文本样式保持一致，减少突兀感 */
.editable-input {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
  padding: 5rpx 0 !important;
  background: transparent !important;
  border: none !important;
  line-height: 40rpx !important;
  /* 聚焦时轻微边框提示，不破坏整体风格 */
  &:focus {
    border-bottom: 1px solid #2979ff !important;
    border-radius: 0 !important;
  }
}

/* 输入框后缀单位样式 */
.u-input__suffix {
  font-size: 28rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
}

.uni-card {
	margin: 0 !important;
}
</style>
